<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id = "main">

    <script>
        //获取元素
        const oDiv = document.getElementById("main")

        //核心代码
        function center(e){
            console.log("center");
            console.log(e);
            console.log(this);
        }

        //触发事件
        oDiv.onkeyup = debounce(center , 500)

        //防抖函数
        function debounce(center , timer){
            let timers = null
            //真正的事件函数
            return function(e){
                clearTimeout(timers)
                //等待timer秒后执行
                timers = setTimeout(() => {
                    center.call(this , e)
                }, timer);
            }
        }

        //每次执行核心函数就会设置一个定时器 如果上一次的定时器还没到时间就打断它再次执行下一个核心函数
        //就会导致连续执行多次核心函数 我们只希望打断后只执行最后一个核心函数 
        //所以我们在每次执行之前就把上一次没执行完毕的定时器清除 这样如果打断前面的函数执行的话就会只执行最一个函数




    </script>
</body>

</html>